<!DOCTYPE html>
<html class="ui-page-login">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="__PUBLIC__/js/jquery.min.js"></script>
    <script src="__PUBLIC__/home/plugins/layer/layer.js"></script>
    <script src="__PUBLIC__/mui/js/mui.min.js"></script>
    <script src="__PUBLIC__/js/angular.js"></script>
    <script src="__PUBLIC__/common.js"></script>
    <link rel="stylesheet" href="__PUBLIC__/mui/css/mui.css" />
    <link rel="stylesheet" href="__PUBLIC__/mui/css/mui.picker.css" />
    <link rel="stylesheet" href="__PUBLIC__/mui/css/mui.poppicker.css" />
    <script src="__PUBLIC__/mui/js/mui.picker.js"></script>
    <script src="__PUBLIC__/mui/js/mui.poppicker.js"></script>
    <style>

        #member-login{
            display: none;
        }
        .area {
            margin: 20px auto 0px auto;
        }

        .mui-input-group {
            margin-top: 10px;
        }

        .mui-input-group:first-child {
            margin-top: 20px;
        }

        .mui-input-group label {
            width: 35%;
            font-size: 15px;
            color: black;

        }

        .mui-input-row label~input,
        .mui-input-row label~select,
        .mui-input-row label~textarea {
            width: 65%;
            text-indent: 1em;
            color: #333333;
        }

        .mui-checkbox input[type=checkbox],
        .mui-radio input[type=radio] {
            top: 6px;
        }

        .mui-content-padded {
            margin-top: 25px;
        }

        .mui-btn {
            padding: 10px;
        }

        .link-area {
            display: block;
            margin-top: 25px;
            text-align: center;
        }

        .spliter {
            color: #bbb;
            padding: 0px 8px;
        }

        .oauth-area {
            position: absolute;
            bottom: 20px;
            left: 0px;
            text-align: center;
            width: 100%;
            padding: 0px;
            margin: 0px;
        }

        .oauth-area .oauth-btn {
            display: inline-block;
            width: 50px;
            height: 50px;
            background-size: 30px 30px;
            background-position: center center;
            background-repeat: no-repeat;
            margin: 0px 20px;
            /*-webkit-filter: grayscale(100%); */
            border: solid 1px #ddd;
            border-radius: 25px;
        }

        .oauth-area .oauth-btn:active {
            border: solid 1px #aaa;
        }

        .oauth-area .oauth-btn.disabled {
            background-color: #ddd;
        }

        .login-active {
            background: #f3363a;
        }
        .mui-input-group .enter{
            background: url("__PUBLIC__/images/enter-right.png")no-repeat;!important ;
            background-position: right 1em center;
            background-size: auto 50%;
        }
        a{
            text-decoration: none;

        }
         .file input {
             position: absolute;
             right: 0px;
             top: 0px;
             opacity: 0;
             width: 70%;
             line-height: 40px;

         }
    </style>
    <link rel="stylesheet" href="__PUBLIC__/js/nice-validator-0.10.11/dist/jquery.validator.css" />
    <script src="__PUBLIC__/js/nice-validator-0.10.11/dist/jquery.validator.js"></script>
    <script src="__PUBLIC__/js/nice-validator-0.10.11/dist/local/zh-CN.js"></script>
</head>
<body ng-app="myApp" ng-controller="Ctrl" ng-cloak>
<header class="mui-bar mui-bar-nav" style="background:#f3363a;" >
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: white"></a>
    <h1 class="mui-title login-item" style="color: white">代理注册</h1>
</header>
<div class="mui-content" id="user-login">
    <form class="mui-input-group" method="post" action="" style="margin-top: 0;  background: #efeff4;" data-validator-option="{stopOnError:false, timely:true,theme:'layer'}">
        <div class="mui-input-group">
            <div class="mui-input-row">
                <label>上级代理号</label>
                <input name="upaccount" type="text" class="mui-input-clear mui-input" placeholder="请输入代理帐号" data-rule="required;" ng-model="message.upagenaccount" ng-blur="checkvalida()"  maxlength="11" />
            </div>
        </div>
        <div class="mui-input-group">
            <div class="mui-input-row">
                <label>手机号</label>
                <input name="phone" id="phone" type="text" class="mui-input-clear mui-input" placeholder="手机号" data-rule="required;" ng-model="message.account" ng-blur="checkvalida()"  maxlength="11" />
            </div>
            <div class="mui-input-row">
                <label>名字</label>
                <input name="username" type="text" class="mui-input-clear mui-input" placeholder="请输入名字" data-rule="required;length(2~19)" ng-model="message.username"  maxlength="20" />
            </div>
            <div class="mui-input-row">
                <label>密码</label>
                <input name="password" type="password" class="mui-input-clear mui-input" placeholder="请输入密码" data-rule="required;" ng-model="message.password" ng-blur="checkvalida()"  maxlength="16" />
            </div>
            <div class="mui-input-row">
                <label>确认密码</label>
                <input name="password2" type="password" class="mui-input-clear mui-input" placeholder="确认密码" data-rule="required;" ng-model="message.password2" ng-blur="checkvalida()"  maxlength="16" />
            </div>
            <div class="mui-input-row">
                <label>地址</label>
                <select id='proive' style="width:21%;float: left;" ng-change="getcity()" ng-model="prov" >
                    <option value="请选择" >请选择</option>
                    <option ng-repeat=" x in province" value="{{x.id}}">{{x.name}}</option>
                </select>
                <select id='city' style="width:21%;float: left " ng-change="getxian()" ng-model="cty">
                    <option value="请选择" >请选择</option>
                    <option ng-repeat=" y in city" value="{{y.id}}">{{y.name}}</option>
                </select>
                <select id='xian' style="width:21%;float: left" ng-model="xian">
                    <option value="请选择" >请选择</option>
                    <option ng-repeat="z in subcity" value="{{z.id}}">{{z.name}}</option>
                </select>
            </div>
        </div>
        <div class="mui-input-group">
            <div class="mui-input-row">
                <label>微信号</label>
                <input name="webchat" type="text" class="mui-input-clear mui-input" placeholder="微信号" data-rule="" ng-model="message.webchat" ng-blur="checkvalida()"  maxlength="19" />
            </div>
            <!--<div class="mui-input-row">-->
                <!--<label>链接后缀:</label>-->
                <!--<input name="agenurl" type="text" class="mui-input-clear mui-input" data-rule="required;" placeholder="请最多输入15位英文或数字" ng-model="message.agenurl" ng-blur="checkvalida()" />-->
            <!--</div>-->
            <div class="mui-input-row enter">
                <label>代理级别</label>
                <input name="agenlevel" type="text" class="mui-input-clear mui-input" placeholder="代理级别" data-rule="required;" readonly="" id="showUserPicker" /></a>
                <input type="hidden" ng-model="expid" id="expid">
            </div>
        </div>
        <div class="mui-input-group">
            <div class="mui-input-row">
                <label>身份证号</label>
                <input name="idcard" type="text" class="mui-input-clear mui-input" placeholder="身份证号" data-rule="required;" ng-model="message.idcard" ng-blur="checkvalida()" maxlength="18"  />
            </div>
            <!--<a href="/index.php/home/agen/idcard">-->
                <div class="mui-input-row">
                    <label>上传身份证</label>
                    <div href="javascript:;" class="file" style="line-height: 40px;color: #333333;font-size: 16px;">
                        <input type="file" id="one-input" accept="image/*" file-model="images" onchange="angular.element(this).scope().img_upload(this.files)"/>请选择上传身份证
                    </div>
                </div>
            <!--</a>-->
        </div>
    </form>

    <form ng-submit="submit_form()">
        <div class="mui-input-row" style="text-align: center">
            <div ng-repeat="item in thumb">
                <!-- 采用angular循环的方式，对存入thumb的图片进行展示 -->
                <label style="width: 80%;float: none;display: block;margin: 0 auto;">
                    <img class="mui-col-xs-12" height="200" ng-src="{{item.imgSrc}}"/>
                </label>
                <span ng-if="item.imgSrc" ng-click="img_del($index)"></span>
            </div>
            <div ng-repeat="item in thumb_default">
                <!-- 这里之所以写个循环，是为了后期万一需要多个‘加号’框 -->
               <!-- <label>
                    <input type="file" id="one-input" accept="image/*" file-model="images" onchange="angular.element(this).scope().img_upload(this.files)"/>
                </label>-->


            </div>
        </div>
    </form>

    <div class="mui-input-group">
        <div class="mui-input-row">
            <label>验证码</label>
            <input name='mobilecode' type="text" class="mui-input-clear mui-input" placeholder="请输入验证码" style="width: 35%;float: left" ng-model="message.mobilecode">
            <button name='acquire' id="getcode" class="mui-input-clear mui-input" value="" style="width: 28%;float: left;height: 30px;margin-top:5px;margin-right: 2%" ng-click="getnum()">获取验证码</button>
        </div>
    </div>

    <div class="mui-content-padded">
        <button id="login" class="mui-btn mui-btn-block mui-btn-danger" style="line-height: 1" ng-click="reg()">注册</button>
    </div>
    <div class="mui-content-padded oauth-area">
    </div>

</div>

<script>
    var app = getApp('myApp', []);
    app.controller('Ctrl', function($scope,$http) {
        $purl = "/index.php/Home/Login/initReg";
        $urlid = getUrlParam("id");
        $http({
            method: 'POST',
            data:{id:$urlid},
            url: $purl
        }).then(function successCallback(response) {
            //console.log(response.data);
            if(response.data.code == -1){
                layer.msg(response.data.msg,{time:2000});
            } else if(response.data.code == 0){
                $scope.message = response.data.data.nearagen;
                $scope.agenlevel = response.data.data.agenlevel;
                $scope.uflg = response.data.data.uflg;
                //代理等级数据
                var data=[];
                for (var x in response.data.data.agenlevel){
                    data[x]={};
                    data[x]['value']=response.data.data.agenlevel[x].level;
                    data[x]['text']=response.data.data.agenlevel[x].name;
                }
                //选择代理等级
                var userPicker = new mui.PopPicker();
                userPicker.setData(data);
                var showUserPickerButton = document.getElementById('showUserPicker');
                showUserPickerButton.addEventListener('tap', function(event) {
                    userPicker.show(function(items) {
                        showUserPicker.value = items[0]['text'];
                        $scope.message.agenlevel = items[0]['value'];
                        //getAgenId();
                    });
                }, false);
            }
            }, function errorCallback(response) {
        })

        $scope.prov='请选择';
        $scope.cty='请选择';
        $scope.xian='请选择';
        $http({
            method:'POST',
            url: "/index.php/Home/Tool/getProvince"
        }).then(function successCallback(response) {
            //console.log(response)
            $scope.province= response.data.data.province;
        }, function errorCallback(response) {
        });

        $scope.getcity=function () {
            $http({
                method:'POST',
                data:{pid:$scope.prov},
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                transformRequest: function(obj) {
                    var str = [];
                    for (var p in obj) {
                        str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
                    }
                    return str.join("&");
                },
                url:"/index.php/Home/Tool/getCityAjax"
            }).then(function successCallback(response) {
                $scope.city= response.data
            }, function errorCallback(response) {
            });
        }

        $scope.getxian=function () {
            $http({
                method:'POST',
                data:{pid:$scope.cty},
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                transformRequest: function(obj) {
                    var str = [];
                    for (var p in obj) {
                        str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
                    }
                    return str.join("&");
                },
                url:"/index.php/Home/Tool/getxianAjax"
            }).then(function successCallback(response) {
                $scope.subcity= response.data;
            }, function errorCallback(response) {
            });
        }

        //会员等级变更，重新获取最近代理id
        function getAgenId() {
            //非链接id，重新获取
            if($scope.uflg == 0){
                var data = $scope.message;
                $http({
                    method: 'POST',
                    data: data,
                    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
                    transformRequest: function (obj) {
                        var str = [];
                        for (var p in obj) {
                            str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
                        }
                        return str.join("&");
                    },
                    url: "/index.php/Home/Login/getAgenId"
                }).then(function successCallback(response) {
                    //console.log(response.data.data.nearagen);
                    $scope.message.upagenaccount = response.data.data.nearagen.upagenaccount;
                    $scope.message.upagenlevel = response.data.data.nearagen.upagenlevel;
                }, function errorCallback(response) {
                    errorHandle(response);
                });
            }
        }

        //注册-前往报单页面
        $scope.reg = function () {
            var valida = $('form').trigger("validate").data( "validator" ).isFormValid();//有表单验证的地方用 这个方法
            if (valida) {
                $scope.message.xian = $scope.xian;
                var data = $scope.message;
                //console.log(data);
                http_post($http,"/index.php/Home/Login/regAgen",data,"/index.php/Home/Agen/order");
             }
        }

        //检测填写信息
        $scope.checkvalida = function () {
            $scope.message.xian = $scope.xian;
            var data = $scope.message;
            //console.log(data);
            $http({
                method: 'POST',
                data: data,
                headers: {'Content-Type': 'application/x-www-form-urlencoded'},
                transformRequest: function (obj) {
                    var str = [];
                    for (var p in obj) {
                        str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
                    }
                    return str.join("&");
                },
                url: "/index.php/Home/Login/validaform"
            }).then(function successCallback(response) {
                if(response.data.code==-1){
                    layer.msg(response.data.msg,{time:1000})
                }
            })
        }


        //上传身份证-保存信息
        $scope.reader = new FileReader();   //创建一个FileReader接口
        $scope.form = {     //用于绑定提交内容，图片或其他数据
            image:{},
        };
        $scope.thumb = {};      //用于存放图片的base64
        $scope.thumb_default = {    //用于循环默认的‘加号’添加图片的框
            1111:{}
        };

        $scope.img_upload = function(files) {       //单次提交图片的函数
            $scope.guid = (new Date()).valueOf();   //通过时间戳创建一个随机数，作为键名使用
            $scope.reader.readAsDataURL(files[0]);  //FileReader的方法，把图片转成base64
            $scope.reader.onload = function(ev) {
                $scope.$apply(function(){
                    $scope.thumb[$scope.guid] = {
                        imgSrc : ev.target.result,  //接收base64
                    }
                });
            };

            var data = new FormData();      //以下为像后台提交图片数据
            data.append('image', files[0]);
            data.append('guid',$scope.guid);
            $http({
                method:'POST',
                url: '/index.php/Home/Login/upidcard',
                data:data,
                headers: {'Content-Type': undefined},
                transformRequest: angular.identity
            }).then(function successCallback(response) {
                console.log(response.data)
                if (response.data.code == 0) {
                    layer.msg("上传成功", {time: 1000});
                    $scope.message.idcardimg = response.data.data.url;
                } else {
                    layer.msg("上传失败", {time: 1500});
                }
            }, function errorCallback(response) {
            });
        };

        $scope.getnum = function () {
            var time = 60;
            var t;

            $("#getcode").attr("disabled", true);
            $.post("{:U('Login/getnum')}", {account: $("#phone").val(),type:3}, function (data) {
                if (data == 1) {
                    $("#getcode").html(time + "s");
                    t = setInterval(countdown, 1000);
                } else {
                    layer.msg(data.msg,{time:1000})
                }
            });

            function countdown() {
                time = time - 1;
                $("#getcode").html(time + "s");
                $("#getcode").attr("disabled", true);
                if (time == 0) {
                    $("#getcode").html("验证码");
                    clearInterval(t);
                    $("#getcode").attr("disabled", false);
                }
            }
        }
    })
</script>
</body>
</html>